<template>
  <div>
    <el-form :model="formData" :rules="formRules" ref="formRef" label-width="120px">
      <el-form-item label="规格类型" props="have_spec" :rules="formRules.have_spec">
        <el-radio-group v-model="formData.have_spec">
          <el-radio :label="false">无规格</el-radio>
          <el-radio :label="true">有规格</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="SKU信息" prop="product_list">
        <template slot="label">
          <span style="color: #F56C6C;margin-right: 1px">*</span>SKU信息
        </template>
        <sku-editor
          ref="skuEditor"
          :show-label="false"
          :goodsInfo="formData"
          :categoryId="category_id"
          :have-spec="formData.have_spec"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import SkuEditor from '@/components/SkuEditor'
export default {
  name: 'goodsEditFormSku',
  components: {
    [SkuEditor.name]: SkuEditor
  },
  props: {
    propFormData: {
      type: Object,
      default: () => {}
    },
    category_id: {
      type: String
    }
  },
  data() {
    return {
      // 表单数据
      formData: {
        have_spec: false
      },
      formRules: {
        have_spec: [this.MixinRequired('请选择规格类型', 'change')]
      }
    }
  },
  mounted() {},
  methods: {
    /** 表单校验 */
    async validateForm() {
      try {
        // 表单校验
        await this.$refs.formRef.validate()
        // skuEditor校验
        this.formData.product_list = await this.$refs.skuEditor.submit()
        // 校验通过更新数据
        Object.assign(this.propFormData, this.formData)
      } catch (e) {
        this.$message.error('【价格库存】不完善，请填写相关信息')
        this.$emit('updateActiveTab', 'sku')
        // 截断父组件后面的代码
        throw e
      }
    }
  },
  watch: {
    propFormData: {
      handler(newVal) {
        this.formData = newVal
      }
    }
  }
}
</script>
